<%--
  Created by IntelliJ IDEA.
  User: huangrulan
  Date: 2019/3/12
  Time: 2:32 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><!--<![endif]-->
<head>
    <title>猫眼电影 - 一网打尽好电影</title>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="cleartype" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="HandheldFriendly" content="true">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${base}/static/css/index/ef9cella.css">
    <link rel="stylesheet" href="${base}/static/css/index/13d06bf4.css">
    <link rel="stylesheet" href="${base}/static/css/index/8ba7074d.css">
    <meta name="lx:autopv" content="off">
    <meta name="lx:appnm" content="movie">
    <meta name="lx:category" content="movie">
</head>
<body>
<div class="header">
    <div class="header-inner">
        <img src="${base}/static/image/star.png">
        <div class="ciname-name">阿星影城</div>
        <div class="user-info">
            <div class="user-avatar has-login">
                <img src="${user.header}">
                <span class="caret"></span>
                <ul class="user-menu">
                    <li class="text">
                        <a href="${base}/ticket/user/orderInfo.page">我的订单</a>
                        <input type="hidden" name="userId" value="${user.id}">
                    </li>
                    <li class="text login-name"><a href="${base}/ticket/index/index.page">返回首页</a></li>
                    <li class="text login-name"><a href="${base}/ticket/user/userInfo.page?userId=${user.id}">个人中心</a></li>
                    <li class="text"><a href="${base}/login/logout.do" class="J-logout">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="header-placeholder"></div>
<div class="container" id="app">
    <div class="content">
        <div class="main">
            <div class="info-content clearfix">
                <div class="orders-container">
                    <div class="profile-title">我的订单</div>
                    <div id="orderDiv"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="mask3">
        <div class="modal-container" style="display:none">
            <div class="modal">
                <span class="icon"></span>

                <p class="tip">您确定要删除该订单嘛？删除后，不可恢复～</p>

                <div class="short btn ok-btn">确定</div>
                <div class="short btn cancel-btn">取消</div>
            </div>
        </div>

    </div>
</div>

<div class="footer" style="visibility: visible;">
    <p class="friendly-links">
        商务合作邮箱：v@maoyan.com
        客服电话：10105335
        违法和不良信息举报电话：4006018900
        <br>
        投诉举报邮箱：tousujubao@meituan.com
        舞弊线索举报邮箱：wubijubao@maoyan.com
    </p>
    <p>江苏阿星影城有限公司</p>
</div>

<script src="${base}/assets/js/layui/layui.js"></script>
<script src="${base}/assets/js/larryms/larryms.js"></script>
<%--影片数据渲染--%>
<script id="orderData" type="text/html">
    {{# layui.each(d, function(index, item){ }}
    <div class="order-box" data-orderid="20872803444">
        <div class="order-header">
            <input type="hidden" name="orderId" value="{{ item.id}}">
            <span class="order-date">{{ item.orderTime }}</span>
            <span class="order-id">订单号:{{ item.orderNo}}</span>
            {{# if (item.reback == true){ }}
            <span style="float: right; color: #f0413c; font-weight: 500;" id="reback">退票</span>
            {{# } }}
        </div>
        <div class="order-body">
            <div class="poster">
                <img src="{{ item.briefPic }}">
            </div>
            <div class="order-content">
                <div class="movie-name">{{ item.title }}</div>
                <div class="hall-ticket">
                    <span>{{ item.place }}号厅</span>
                    <span>{{ item.seatNo }}</span>
                </div>
                <div class="show-time">{{ item.startTime }}</div>
            </div>

            <div class="order-price">￥{{ item.money }}</div>

            <div class="order-status">
                {{ item.status }}
            </div>
        </div>
    </div>
    {{# }); }}
</script>
<script>
    layui.use(['jquery', 'laytpl', 'layer'], function () {
        var $ = layui.jquery,  laytpl = layui.laytpl, layer = layui.layer;
        var larryms;
        $(document).ready(function () {
            $.ajax({
                url: '../user/order.do',
                type: 'GET',
                dataType: 'json',
                async: true,
                success: function (res) {
                    if (res.success) {
                        if (res.data.length > 0){
                            var getTpl = orderData.innerHTML
                                , view = document.getElementById('orderDiv');
                            laytpl(getTpl).render(res.data, function (html) {
                                view.innerHTML = html;
                            });
                        }else {
                            var view = document.getElementById('orderDiv');
                            var html = "<span>还没有订单，快去下单吧～</span>"
                            view.innerHTML = html;
                        }
                    }
                }
            });
        });

        $(document).on("click", "#reback", function () {
            var orderId = $("input[name=orderId]").val();
            layer.confirm('你确定要退票吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.ajax({
                    url: '../user/reback.do',
                    type: 'POST',
                    dataType: 'json',
                    data: {orderId: orderId},
                    async: true,
                    success: function (res) {
                        if (res.success) {
                            layer.msg(res.data, {icon: 1, time: 2000}, function () {
                                location.reload();
                            });
                        }else {
                            layer.msg(res.msg, {icon: 5, time: 2000}, function () {
                                location.reload();
                            });
                        }
                    }
                });
            }, function(){
                layer.msg('取消退票', {icon: 6, time: 1000});
            });
        });
    });
</script>


</body>
</html>
